<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script src="js/jquery.js"></script>
<script src="js/jquery-ui.js"></script>
</head>
<style>
div{ width:100px; height:100px; text-align:center; line-height:100px; margin-top:40px; box-shadow:0 0 10px #03C; cursor:move;}
#drag1:hover,#drag2:hover,#drag3:hover,#drag4:hover{ background:#F63;}
body{ border:1px solid #ccc; }
#drag1{ background:#0CC; color:#fff;}
#drag2{ background:#099; color:#fff;}
#drag3{ background:#069; color:#fff;}
#drag4{ background:#09C; color:#fff;}
</style>
<script>
$(function(){
	$("#drag1").draggable({revert:true});	
	$("#drag2").draggable({revert:true,helper:"clone"});
	$("#drag3").draggable({containment:"body"});
	$("#drag4").draggable();
});
</script>
<body>
<div id="drag1">
	拖我我会回去
</div>
<div id="drag2">
	我会clone
</div>
<div id="drag3">
	我拖不出盒子
</div>
<div id="drag4">
	我随便拖
</div>
</body>
</html>
